<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">  
    <title>申诉任务</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    	<link rel="stylesheet" href="dist/lib/weui.css">
		<link rel="stylesheet" href="font/iconfont.css" />
		<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
		<script src="dist/js/jquery-weui.min.js"></script>
		<link rel="stylesheet" href="css/css.css" />
		<link rel="stylesheet" href="layui/css/layui.css" />
		<script src="layui/layui.js"></script>
		
</head>

	
<style>
	.bg_qh{
		background: #F0F0F0;
		font-size: 14px;
	}
	.ans_advice {
    width: 90%;
    background: #FD295B;
    text-align: center;
    font-size: 15px;
    margin: 20px auto 0 auto;
    padding: 8px 0;
    border-radius: 20px;
}
#mask{
	position:fixed;
	background:rgba(0,0,0,0.5);
	z-index:1000;
	width: 100%;
	height:100%;
	top:0;
	display:none;
}
#mask-content{
	position: fixed;
	width: 85%;
	background: white;
	border-radius: 5px;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
    display: none;
}
.weui-cell__bd p{
	font-size: 14px;
}
.layui-upload-img {
    width: 92px;
    height: 92px;
    margin: 0 10px 10px 0;
}


.layui-btn {
 height: 32px !important;
  line-height: 32px !important;
    background-color: #f0f0f0 !important;
    color: #333 !important;
        box-shadow: inset 0 0.3rem 0.2rem rgba(255,255,255,.2), inset 0 -0.3rem 0.2rem rgba(0,0,0,.2), 0 0.2rem 0.4rem rgba(0,0,0,.2) !important;
    
}
</style>
</head>
<body ontouchstart>
<header class="wy-header" style="background-color: #fff;">
    <div class="wy-header-icon-back">
        <a href="javascript:history.back(-1)"><i class="iconfont icon-left6"></i></a>
    </div>
    <div class="wy-header-title">申诉任务</div>
</header>

<div class="shensu-content">
    <div class="weui-cell bg_qh">第一步：选择任务类型</div>

        <a class="weui-cell weui-cell_access" href="javascript:;" >
            <div class="weui-cell__bd">
                <p class="font-14" id="shensu-type">申诉类型</p>
            </div>
            <span class="weui-cell__ft"></span>
        </a>
    <div class="weui-cell bg_qh">第二步：填写申诉说明并添加图片</div>
<!--     <div style="padding: 15px">
         <textarea name="" id=""  rows="9" style="width: 100%"placeholder="请简要填写申诉说明"></textarea>

      <div class="weui-uploader__bd">
							                            <ul class="weui-uploader__files" id="uploaderFiles">
							                            </ul>
							                            <div class="weui-uploader__input-box">
							                                <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*">
							                                <input type="hidden" name="descImg" id="descimg">
							                            </div>
							                        </div>
						
						
						
						
         <div style="clear: both;"></div>
     </div> -->
  
     <div style="padding-left: 15px;">
     <div class="layui-upload"style="float: left;">
 
  <div class="layui-upload-list">
    <img class="layui-upload-img" id="demo1">
    <p id="demoText"></p>
  </div>
   <button type="button" class="layui-btn" id="test1">上传图片</button>
</div>  

    <div class="layui-upload"style="float: left;">
  
  <div class="layui-upload-list">
    <img class="layui-upload-img" id="demo2">
    <p id="demoText2"></p>
  </div>
  <button type="button" class="layui-btn" id="test2">上传图片</button>
</div> 

<div style="clear: both;"></div>
</div> 
		
					
</div>

<div class="weui-row">
	<div class="weui-col-100">
	<div class="ans_advice">
						<a href="">
							<span style="margin-left: 8px;color: white;">提交</span>
						</a>
					</div>
	</div>	


</div>


<div id="mask">
	<div id="mask-content">
		
		<div class="weui-cells_radio">
  <label class="weui-cell weui-check__label" for="x11">
    <div class="weui-cell__bd">
      <p>商品错误</p>
    </div>
    <div class="weui-cell__ft">
      <input type="radio" class="weui-check" name="radio1" id="x11">
      <span class="weui-icon-checked"></span>
    </div>
  </label>
  <label class="weui-cell weui-check__label" for="x12">

    <div class="weui-cell__bd">
      <p>返款问题</p>
    </div>
    <div class="weui-cell__ft">
      <input type="radio" name="radio1" class="weui-check" id="x12" checked="checked">
      <span class="weui-icon-checked"></span>
    </div>
  </label>
  
    <label class="weui-cell weui-check__label" for="x13">
    <div class="weui-cell__bd">
      <p>快递问题</p>
    </div>
    <div class="weui-cell__ft">
      <input type="radio" class="weui-check" name="radio1" id="x13">
      <span class="weui-icon-checked"></span>
    </div>
  </label>
  
   
  
    <label class="weui-cell weui-check__label" for="x15">
    <div class="weui-cell__bd">
      <p>目标商品答案错误或找不到</p>
    </div>
    <div class="weui-cell__ft">
      <input type="radio" class="weui-check" name="radio1" id="x15">
      <span class="weui-icon-checked"></span>
    </div>
  </label>
  
   <label class="weui-cell weui-check__label" for="x14">
    <div class="weui-cell__bd">
      <p>其他问题</p>
    </div>
    <div class="weui-cell__ft">
      <input type="radio" class="weui-check" name="radio1" id="x14">
      <span class="weui-icon-checked"></span>
    </div>
  </label>
  
</div>
		
		
		
	</div>
</div>




<!--<script type="text/javascript">
		    
		        var descid1 ="";
				$(function(){
		        var tmpl = '<li class="weui-uploader__file"  style="background-image:url(#url#)"></li>',
		            $gallery = $("#gallery"), $galleryImg = $("#galleryImg"),
		            $uploaderInput = $("#uploaderInput"),
		            $uploaderFiles = $("#uploaderFiles"),
		            $gallerydel = $(".weui-gallery__opr");
		
		        $uploaderInput.on("change", function(e){
		        	
		            var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
		            for (var i = 0, len = files.length; i < len; ++i) {
		                var file = files[i];
 					
		                if (url) {
		                    src = url.createObjectURL(file);
   
		                } else {
		                    src = e.target.result;
		                }
		                var formData = new FormData();
					    formData.set('file',$uploaderInput[0].files[0]);					
		                $uploaderFiles.append($(tmpl.replace('#url#', src)));		               
					
						 $(this).parent().siblings("ul").children("li").each(function(index, item){
						    $(item).attr('id', 'img-' + index);
						});
		            }   
		        });
		        

		       
		    });
		    
		</script>-->
		<script>
	layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;
  
  
  /*普通图片上传*/
   var uploadInst = upload.render({
    elem: '#test1'
    ,url: '/upload/'
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo1').attr('src', result); //图片链接（base64）
      });
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      //上传成功
    }
    ,error: function(){
      //演示失败状态，并实现重传
      
    }
  });
  
  
   /*普通图片上传*/
     var uploadInst = upload.render({
    elem: '#test2'
    ,url: '/upload/'
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo2').attr('src', result); //图片链接（base64）
      });
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      //上传成功
    }
    ,error: function(){
      //演示失败状态，并实现重传
      
    }
  });
  
  
  
  })
			
			
		</script>

<script>
	
			
			
	/*关闭弹出框	*/
		
			$("#shensu-type").on("click",function(){
				$("#mask-content").show();
				$("#mask").show();
			});
			var dialogContent=document.getElementById('mask-content');
			var yhDialog=document.getElementById('mask');

		/*	var yh=document.getElementById('yh');*/
			$('.weui-check').on("click",function(){
			var haschecked=$('input[name=radio1]:checked').parents('.weui-cell__ft').prev().find("p").html();
			/*alert(haschecked)*/
				if($(this).is(':checked')){
					setTimeout(function(){
						dialogContent.style.display="none";
						yhDialog.style.display="none";
						$("#shensu-type").text(haschecked);
					},200)

				}
			})
			
</script>



</body>
</html>